<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>数据字典</title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
    <script src="../../../component/layui/layui.js"></script>
    <script src="../../../component/pear/pear.js"></script>
    <style>
        .empty {
            text-align: center;
            padding: 80px;
        }

        .empty .error {
            color: #f56c6c;
            text-align: center;
            margin-top: 40px;
            margin-bottom: 20px;
        }

        .empty .error span {
            font-size: 80px;
        }
    </style>
</head>

<body class="pear-container">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md3">
            <div class="layui-panel">
                <ul class="layui-menu" id="dictTypeMenu">
                </ul>
            </div>
        </div>
        <div class="layui-col-md9">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="empty">
                        <div class="error">
                            <span class="icon pear-icon pear-icon-warning"></span>
                        </div>
                        <h2 class="title">请选择左侧字典类型</h2>

                    </div>
                    <table id="table" lay-filter="table"></table>
                </div>
            </div>
        </div>
    </div>

</body>

</html>

<script type="text/html" id="dictTypeTpl">
    {{#  layui.each(d.list, function(index, item){ }}
    <li lay-options="{{item.key}}">
        <div class="layui-menu-body-title">
            <span>{{item.description}}-{{item.value}}</span>
        </div>
    </li>
    {{#  }); }}
</script>

<script type="text/html" id="toolbar">
	<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
		<i class="layui-icon layui-icon-add-1"></i>
		新增
	</button>
</script>

<script type="text/html" id="bar">
	<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
	<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="del"><i class="layui-icon layui-icon-delete"></i></button>
</script>

<script type="text/html" id="templet-isActive">
	{{#if(d.isActive){}}
	<input type="checkbox" name="isActive" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="templet-isActive" checked  }}>
	{{# }else { }}
	<input type="checkbox" name="isActive" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="templet-isActive" }}>
	{{# } }}
</script>


<script>
    layui.use(['table', 'form', 'jquery', 'permission', 'context', 'popup', 'common', 'tableext', 'laytpl', 'dropdown', 'treetable'], function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        var common = layui.common;
        var permission = layui.permission;
        var context = layui.context;
        var popup = layui.popup;
        var laytpl = layui.laytpl;
        var dropdown = layui.dropdown;
        var treetable = layui.treetable;

        var basePath = context.get("base-path");
        var dictTypeKey = "";


        //加载字典类型
        $.ajax({
            url: basePath + "/api/system/dict/getdicttypelist",
            success: function (result) {
                let getTpl = dictTypeTpl.innerHTML;
                let view = document.getElementById('dictTypeMenu');
                laytpl(getTpl).render({ list: result.data }, function (html) {
                    view.innerHTML = html;
                });
            }
        })

        //字典类型点击
        dropdown.on('click(dictTypeMenu)', function (options) {
            dictTypeKey = options;
            window.loadTreeTable();
        });


        table.on("tool(table)", function (obj) {
            if (obj.event === "edit") {
                window.edit(obj);
            } else if (obj.event === "del") {
                window.del(obj);
            }
        });

        table.on("toolbar(table)", function (obj) {
            if (obj.event === "add") {
                window.add();
            } else if (obj.event === "refresh") {
                window.refresh();
            }
        });

        form.on("switch(templet-isActive)", function (obj) {
            $.ajax({
                url: basePath + "/api/system/dict/setactive",
                data: JSON.stringify({ "id": obj.value }),
                success: function (result) {
                    if (result.succeeded) {
                        popup.success("设置成功");
                    } else {
                        popup.failure(JSON.stringify(result.errors));
                    }
                }
            })
        });

        window.add = function () {
            layer.open({
                type: 2,
                title: '新增字典项',
                shade: 0.1,
                area: ['500px', '400px'],
                content: 'add.html?type=' + dictTypeKey + '&fresh=' + Math.random()
            });
        }

        window.edit = function (obj) {
            layer.open({
                type: 2,
                title: '编辑字典项',
                shade: 0.1,
                area: ['500px', '400px'],
                content: 'edit.html?id=' + obj.data['id'] + '&fresh=' + Math.random()
            });
        }

        window.del = function (obj) {
            let lock = false;
            layer.confirm('确定要删除该字典项吗', {
                icon: 3,
                title: '提示'
            }, function (index) {
                if (!lock) {
                    lock = true;
                    layer.close(index);
                    let id = obj.data['id'];
                    let loading = layer.load();
                    $.ajax({
                        url: basePath + "/api/system/dict/del",
                        data: JSON.stringify({ Id: id }),
                        success: function (result) {
                            layer.close(loading);
                            if (result.succeeded) {
                                popup.success("删除成功", function () {
                                    obj.del();
                                });
                            } else {
                                popup.failure(JSON.stringify(result.errors));
                            }
                        }
                    })
                }
            });
        }

        window.loadTreeTable = function () {
            $(".empty").remove();
            treetable.render({
                elem: '#table',
                method: "post",
                url: basePath + '/api/system/dict/getlist',
                where: JSON.stringify({ "content": dictTypeKey }),
                dataType: 'json',
                contentType: 'application/json',
                toolbar: '#toolbar',
                treeColIndex: 1,
                treeSpid: 0,
                treeIdName: 'id',
                treePidName: 'pId',
                skin: 'line',
                treeDefaultClose: true,
                page: false,
                cols: [
                    [
                        { title: '编号', field: 'id', hide: true },
                        { title: '字典类型', field: 'typeStr' },
                        { title: '值', field: 'value' },
                        { title: "状态", field: "isActive", align: "center", templet: "#templet-isActive" },
                        { title: '排序', field: 'sort' },
                        { title: '操作', toolbar: '#bar', width: 180 }
                    ]
                ],
                parseData: function (res) {
                    return {
                        "count": res.data.length,
                        'statusCode': res.statusCode,
                        'data': res.data
                    };
                },
                done: function (res, curr, count) {
                    treetable.expandAll("#table");
                }
            })
        }

        window.refresh = function () {
            treetable.reload("#table");
        }

    })
</script>